import React, { useEffect, useState } from "react";
import { Trash } from "lucide-react";
import { useDropzone } from "react-dropzone";
import { Button } from "@/components/ui/button";
import _ from "lodash";

interface DropzoneFileUploaderProps {
  value: File[];
  onChange: (acceptedFiles: File[]) => void;
}

export const DropzoneFileUploader: React.FC<DropzoneFileUploaderProps> = ({
  value = [],
  onChange,
}) => {
  const [fileList, setFileList] = React.useState<File[]>(value);

  const onDropCallback = React.useCallback(
    (acceptedFiles: File[]) => {
      console.log(acceptedFiles);
      // acceptedFiles.forEach((file) => {
      //   const reader = new FileReader();

      //   reader.onabort = () => console.log("file reading was aborted");
      //   reader.onerror = () => console.log("file reading has failed");
      //   reader.onload = () => {
      //     // Do whatever you want with the file contents
      //     const binaryStr = reader.result;
      //     console.log(binaryStr);
      //   };
      //   reader.readAsArrayBuffer(file);
      // });

      const tmpList = _.cloneDeep(fileList);
      console.log(tmpList);
      acceptedFiles.forEach((file) => {
        const existed = tmpList.findIndex((item: File) => {
          return item.name == file.name;
        });
        console.log(existed);
        if (existed <= 0) {
          tmpList.push(file);
        }
      });
      setFileList(tmpList);
      onChange(tmpList);
    },
    [onChange]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: onDropCallback,
  });

  const handleDeleteClick = (event: any, item: any) => {
    event.stopPropagation();
    console.log(item);
    const tmpList = _.cloneDeep(fileList);
    console.log(tmpList); // File对象不能用JSON.parse(JSON.stringify)复制
    const index = tmpList.findIndex((ele: File) => {
      console.log(item.name);
      console.log(ele.name);
      return ele.name == item.name;
    });
    console.log(index);
    if (index >= 0) {
      tmpList.splice(index, 1);
    }
    console.log(tmpList);
    setFileList(tmpList);
  };

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <div className="border-2 border-dashed rounded-lg p-8 flex flex-col items-center justify-center text-center">
          {isDragActive ? (
            <p>Drop the files here ...</p>
          ) : (
            <>
              <p>拖动文件释放到这里或者点击选择文件</p>
              <Button variant="outline" className="mt-4" onClick={() => {}}>
                选择文件
              </Button>
            </>
          )}
        </div>
      </div>
      <div id="fileList">
        <ul>
          {fileList.map((item: File) => {
            return (
              <li key={item.name} className="flex justify-between my-3">
                {item.name}{" "}
                <span
                  key={item.name}
                  onClick={() => handleDeleteClick(event, item)}
                >
                  <Trash />
                </span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};
